require('../../assets/css/index.less');
require('../../assets/fitness-font/iconfont.css');
require('./sportsData.less');
// 引入window
const { $, g } = require('../../utils/dom')

// 引入echarts
let echarts = require('echarts');

// 引入axios
const axios = require('../../utils/axios.js');

// window加载事件

$(function () {

    // 头像渲染
    axios.get('/api/user/info').then(res => {
        if (res.data.errno === 0) {
            g('#img').src = res.data.data.imgUrl;
        }
    })

    // 运动时长渲染
    axios.get('/api/exercise').then(res => {
        if (res.data.errno === 0) {
            g('#mintue').textContent = res.data.data.sum7Duration
            g('#mintues').textContent = res.data.data.sum7Calorie
            g('#sum1').textContent = res.data.data.days[0].sumCalorie
            console.log('res.data :>> ', res.data);
        }
    })

    // 点击返回上一页
    g('#backbtn').addEventListener('click', () => {
        history.back();
    })
    // 封装柱状图
    function renderBar() {
        window.onresize = function () {
            myChart.resize();
        }
        // 初始化
        let myChart = echarts.init(g('.bar'));
        // 绘制图表
        myChart.setOption({
            title: {
                text: '近七天运动时长',
                left: 15,
                top: 15,
            },
            tooltip: {},
            xAxis: {
                data: ['11.5', '11.6', '11.7', '11.8', '11.9', '11.10', '11.11']
            },
            yAxis: {},
            series: [
                {
                    name: '销量',
                    type: 'bar',
                    data: [20, 40, 36, 50, 28, 30, 40, 60]
                }
            ]
        });
    }
    renderBar();

    // 封装饼图
    function renderPie() {

        // 初始化
        const myChart = echarts.init(g('.pie'));
        let option = {
            title: {
                text: '运动分类',
                top: '15',
                left: '15'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                top: 'middle'
            },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        {
                            value: 40,
                            name: '训练',
                            label: {
                                // show: false,
                                position: 'inside',
                                color: '#fff',
                                formatter: '{c}%',
                            },
                            itemStyle: {
                                color: '#58bb92',
                            },
                        },
                        {
                            value: 25,
                            name: '跑步',
                            label: {
                                position: 'inside',
                                color: '#fff',
                                formatter: '{c}%',
                            },
                            itemStyle: {
                                color: '#736171',
                            },
                        },
                        {
                            value: 35,
                            name: '骑行',
                            label: {
                                position: 'inside',
                                color: '#fff',
                                formatter: '{c}%',
                            },
                            itemStyle: {
                                color: '#ee5c43',
                            },
                        },
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        // 导入配置
        myChart.setOption(option)
    }
    renderPie();
})